<!--
 * @Author: gao_m3
 * @Date: 2020-12-01 09:17:31
 * @LastEditors: zhong_m
 * @LastEditTime: 2022-01-06 09:01:19
 * @Descripttion: 
-->
<template>
  <div v-if="show">
    <fks-dialog :visible.sync="show" width="960px" :before-close="handleClose">
      <div slot="title">
        <i v-if="serverState" class="fks-icon-plus" :style="{ color: theme }" />
        <i
          v-if="!serverState"
          class="fks-icon-edit"
          :style="{ color: theme }"
        />
        {{ serverState ? LANG.ADD : LANG.EDIT }}
      </div>
      <fks-form
        ref="addConfig"
        :model="addConfig"
        :rules="serverState ? addConfigRules : editConfigRules"
      >
        +
        <fks-form-item
          v-if="serverType == 'smsServerConfig'"
          :label="LANG.SERVER_NAME"
          prop="serverName"
          lead
          :span="12"
        >
          <fks-input
            v-model="addConfig.serverName"
            maxlength="50"
            :placeholder="LANG.PLACEHOLDER_SERVERNAME"
          />
        </fks-form-item>
        <fks-form-item
          v-if="serverType == 'smsServerConfig'"
          :label="LANG.SERVER_TYPE"
          prop="type"
          :span="12"
        >
          <fks-select
            v-model="addConfig.type"
            style="width: 100%"
            @change="selectSmsType"
          >
            <fks-option
              v-for="item in smsTypes"
              :key="item"
              :label="item"
              :value="item"
            />
          </fks-select>
        </fks-form-item>
        <fks-form-item :label="LANG.SERVER_ADDRESS" prop="host" :span="12" lead>
          <fks-input
            v-model="addConfig.host"
            :disabled="isDisabled"
            maxlength="50"
          />
        </fks-form-item>
        <fks-form-item
          :span="12"
          :label="LANG.PORT"
          prop="port"
          align="left"
          header-align="center"
        >
          <fks-input
            v-model="addConfig.port"
            :disabled="isDisabled"
            maxlength="50"
          />
        </fks-form-item>
        <fks-form-item
          v-if="serverType == 'smsServerConfig'"
          :span="12"
          lead
          :label="LANG.HOSTNAME"
          prop="proxyConfig.hostName"
          align="left"
          header-align="center"
        >
          <fks-input v-model="addConfig.proxyConfig.hostName" maxlength="50" />
        </fks-form-item>
        <fks-form-item
          v-if="serverType == 'smsServerConfig'"
          :span="12"
          :label="LANG.PROXY_PORT"
          prop="proxyConfig.port"
          align="left"
          header-align="center"
        >
          <fks-input v-model="addConfig.proxyConfig.port" maxlength="50" />
        </fks-form-item>
        <fks-form-item
          v-if="serverType == 'smsServerConfig'"
          :span="12"
          lead
          :label="LANG.SCHEME"
          prop="proxyConfig.scheme"
          align="left"
          header-align="center"
        >
          <fks-input v-model="addConfig.proxyConfig.scheme" maxlength="50" />
        </fks-form-item>
        <fks-form-item
          v-if="serverType == 'smsServerConfig'"
          :span="12"
          :label="LANG.SIGN"
          prop="sign"
          align="left"
          header-align="center"
        >
          <span slot="label">
            <span class="span-box">
              <span>{{ LANG.SIGN }}</span>
              <fks-tooltip placement="top-start">
                <div
                  slot="content"
                  style="font-size: 14px; line-height: 20px"
                  class="tips-container"
                >
                  {{ LANG.SIGN_TIP }}
                </div>
                <i class="fks-icon-question" />
              </fks-tooltip> </span
          ></span>
          <fks-input v-model="addConfig.sign" maxlength="50" />
        </fks-form-item>
        <fks-form-item
          :span="12"
          lead
          :label="LANG.ACCOUNT"
          prop="username"
          align="left"
          header-align="center"
        >
          <span slot="label">
            <span class="span-box">
              <span>{{ LANG.ACCOUNT }}</span>
              <fks-tooltip placement="top-start">
                <div
                  slot="content"
                  style="font-size: 14px; line-height: 20px"
                  class="tips-container"
                >
                  {{ serverType == 'smsServerConfig' ? LANG.TIP0 : LANG.TIP1 }}
                </div>
                <i class="fks-icon-question" />
              </fks-tooltip> </span
          ></span>

          <fks-input
            v-model="addConfig.username"
            autocomplete="new-username"
            maxlength="50"
          />
        </fks-form-item>
        <fks-form-item :label="LANG.PASSWORD" prop="password" :span="12">
          <span slot="label">
            <span class="span-box">
              <span>{{ LANG.PASSWORD }}</span>
              <fks-tooltip placement="top-start">
                <div
                  slot="content"
                  style="font-size: 14px; line-height: 20px"
                  class="tips-container"
                >
                  {{ serverType == 'smsServerConfig' ? LANG.TIP2 : LANG.TIP3 }}
                </div>
                <i class="fks-icon-question" />
              </fks-tooltip> </span
          ></span>
          <fks-input
            v-model="addConfig.password"
            show-password
            autocomplete="new-password"
            maxlength="50"
          />
        </fks-form-item>
      </fks-form>
      <div class="btns">
        <section>
          <fks-button
            v-permission="['mail:save']"
            style="margin-top: 8px"
            type="primary"
            icon="fks-icon-check"
            @click="dialogSubmit('addConfig')"
          >
            {{ LANG.SAVE }}
          </fks-button>
        </section>
      </div>
    </fks-dialog>
  </div>
</template>

<script>
import * as types from '@/store/Getter/getterTypes.js'
export default {
  name: 'AddConfig',

  props: {
    showDialog: { type: Boolean },
    config: {},
    serverState: { type: Boolean }, //0-编辑 1-新增
    serverType: {} //sms or mail
  },
  data() {
    return {
      smsTypes: ['mq', 'qcloud', 'acs'],
      isDisabled: false,
      show: false,
      addConfig: {
        serverName: '',
        type: '',
        host: '',
        port: '',
        proxyConfig: {
          hostName: null,
          port: null,
          scheme: null
        },
        sign: '',
        username: '',
        id: '',
        password: '',
        state: false
      }
    }
  },
  computed: {
    theme() {
      return this.$store.getters[types.THEME]
    },
    //form校验规则 编辑时
    editConfigRules() {
      const editConfigRules = {
        serverName: [{ required: true, message: this.LANG.MSG_SERVERNAME }],
        type: [{ required: true, message: this.LANG.MSG_TYPE }],
        host: [
          {
            required: true,
            message: this.LANG.MSG_HOST
          }
        ],
        port: [{ required: true, validator: this.isPort }],
        username: [{ required: true, message: this.LANG.MSG_USERNAME }],
        'proxyConfig.hostName': [
          {
            required:
              this.addConfig.proxyConfig.scheme ||
              this.addConfig.proxyConfig.port
                ? true
                : false,
            message: this.LANG.MSG_HOSTNAME,
            trigger: 'blur'
          }
        ],
        'proxyConfig.port': [
          {
            required:
              this.addConfig.proxyConfig.scheme ||
              this.addConfig.proxyConfig.hostName
                ? true
                : false,
            // message: this.LANG.MSG_PROXY_PORT,
            validator: this.proxyPort,
            trigger: 'blur'
          }
        ],
        'proxyConfig.scheme': [
          {
            required:
              this.addConfig.proxyConfig.hostName ||
              this.addConfig.proxyConfig.port
                ? true
                : false,
            message: this.LANG.MSG_SCHEME,
            trigger: 'blur'
          }
        ]
      }
      return editConfigRules
    },
    //form校验规则 新增
    addConfigRules() {
      const addConfigRules = {
        serverName: [{ required: true, message: this.LANG.MSG_SERVERNAME }],
        type: [{ required: true, message: this.LANG.MSG_TYPE }],
        host: [
          {
            required: true,
            message: this.LANG.MSG_HOST
          }
        ],
        port: [{ required: true, validator: this.isPort }],
        username: [{ required: true, message: this.LANG.MSG_USERNAME }],
        password: [{ required: true, message: this.LANG.MSG_PASSWORD }],
        'proxyConfig.hostName': [
          {
            required:
              this.addConfig.proxyConfig.scheme ||
              this.addConfig.proxyConfig.port
                ? true
                : false,
            message: this.LANG.MSG_HOSTNAME,
            trigger: 'blur'
          }
        ],
        'proxyConfig.port': [
          {
            required:
              this.addConfig.proxyConfig.scheme ||
              this.addConfig.proxyConfig.hostName
                ? true
                : false,
            // message: this.LANG.MSG_PROXY_PORT,
            validator: this.proxyPort,
            trigger: 'blur'
          }
        ],
        'proxyConfig.scheme': [
          {
            required:
              this.addConfig.proxyConfig.hostName ||
              this.addConfig.proxyConfig.port
                ? true
                : false,
            message: this.LANG.MSG_SCHEME,
            trigger: 'blur'
          }
        ]
      }
      return addConfigRules
    }
  },
  watch: {
    showDialog(val) {
      this.show = val
      if (val) {
        this.initData()
        if (!this.serverState) {
          for (var item in this.config) {
            this.addConfig[item] = this.config[item]
          }
          if (this.addConfig.type == 'qcloud' || this.addConfig.type == 'acs') {
            this.isDisabled = true
          }
        }
      }
    }
  },
  mounted() {},

  methods: {
    /**
     * @description: 验证端口是否在[0,65535]之间
     */
    isPort(rule, value, callback) {
      if (!value && value !== 0) {
        return callback(new Error(this.LANG.MSG_PORT))
      }
      setTimeout(() => {
        const re = /^([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/
        const rsCheck = re.test(value)
        if (!rsCheck) {
          callback(new Error(this.LANG.MSG_PORT_RANGE))
        } else {
          callback()
        }
      }, 100)
    },
    proxyPort(...args) {
      if (
        this.addConfig.proxyConfig.scheme ||
        this.addConfig.proxyConfig.hostName
      ) {
        return this.isPort(...args)
      } else {
        args[2]()
      }
    },
    initData() {
      if (this.$refs['addConfig']) {
        this.$refs['addConfig'].clearValidate()
      }
      this.isDisabled = false
      this.addConfig.serverName = ''
      delete this.addConfig.type
      this.addConfig.host = ''
      this.addConfig.port = ''
      this.addConfig.sign = ''
      this.addConfig.username = ''
      this.addConfig.id = ''
      this.addConfig.password = ''
      this.addConfig.state = false
      this.addConfig.proxyConfig = {
        hostName: null,
        port: null,
        scheme: null
      }
    },
    //选择短信服务器类型
    selectSmsType(val) {
      if (val == 'mq') {
        this.isDisabled = false
        this.$set(this.addConfig, 'host', '')
        this.$set(this.addConfig, 'port', '')
      }
      if (val == 'qcloud') {
        this.isDisabled = true
        this.$set(this.addConfig, 'host', 'yun.tim.qq.com')
        this.$set(this.addConfig, 'port', 80)
      }
      if (val == 'acs') {
        this.isDisabled = true
        this.$set(this.addConfig, 'host', 'dysmsapi.aliyuncs.com')
        this.$set(this.addConfig, 'port', 80)
      }
    },

    handleClose() {
      this.initData()
      this.$emit('close')
    },

    dialogSubmit(formName) {
      if (this.serverType != 'smsServerConfig') {
        delete this.addConfig.proxyConfig
        delete this.addConfig.sign
      } else {
        Object.keys(this.addConfig.proxyConfig).forEach((key) => {
          if (this.addConfig.proxyConfig[key] === '')
            this.addConfig.proxyConfig[key] = null
        })
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$emit('submit', this.addConfig, this.serverState)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.btns {
  height: 25px;

  section {
    float: right;
  }
}
</style>